<template>
  <div class="knowledge-publish-container">
    <el-card shadow="never" class="publish-card">
      <!-- 顶部操作栏 -->
      <div slot="header" class="card-header">
        <el-button 
          type="primary" 
          icon="el-icon-plus" 
          @click="publishKnowledgeClick">
          发布新知识
        </el-button>
      </div>

      <!-- 知识列表 -->
      <div class="knowledge-list">
        <el-row :gutter="20">
          <el-col 
            :span="12" 
            v-for="(item, index) in userKnowledges" 
            :key="index"
            class="knowledge-col">
            <el-card class="knowledge-item" shadow="hover">
              <div class="knowledge-content">
                <!-- 知识图片 -->
                <div class="knowledge-image">
                  <el-image
                    :src="item.picPath ? $store.state.imgShowRoad + '/file/' + item.picPath : require('../assets/img/wutu.gif')"
                    fit="cover"
                    class="knowledge-img">
                    <div slot="error" class="image-error">
                      <i class="el-icon-picture-outline"></i>
                    </div>
                  </el-image>
                </div>

                <!-- 知识信息 -->
                <div class="knowledge-info">
                  <h4 class="knowledge-title" :title="item.title">{{ item.title }}</h4>
                  <div class="knowledge-meta">
                    <span class="knowledge-author">
                      <i class="el-icon-user"></i>
                      {{ item.ownName }}
                    </span>
                  </div>
                  <p class="knowledge-desc">{{ item.content }}</p>
                  
                  <!-- 操作按钮 -->
                  <div class="knowledge-actions">
                    <el-button 
                      type="text" 
                      icon="el-icon-edit" 
                      @click="changeKnowledgeInfo(item.knowledgeId)">
                      编辑
                    </el-button>
                    <el-button 
                      type="text" 
                      icon="el-icon-delete" 
                      @click.stop="deleteKnowledgeInfo(item.knowledgeId)"
                      style="color: #F56C6C">
                      删除
                    </el-button>
                  </div>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </el-card>

    <!-- 编辑组件 -->
    <change-knowledge :cupdateKnowledgeInfo="updateInfo"></change-knowledge>
    <delete-knowledge></delete-knowledge>
  </div>
</template>

<script>
import {
  selectKnowledgeById,
  selectKnowledgeByUsername,
} from "../api/knowledge";
import ChangeKnowledge from "./ChangeKnowledge.vue";
import DeleteKnowledge from "./DeleteKnowledge.vue";

export default {
  components: { DeleteKnowledge, ChangeKnowledge },
  data() {
    return {
      userKnowledges: [],
      updateInfo: {},
    };
  },
  methods: {
    publishKnowledgeClick() {
      this.$router
        .push("/home/addmessage/publishknowledges")
        .catch((err) => err);
    },
    changeKnowledgeInfo(item) {
      this.$store.commit("updateChangedKnowledgeId", item);
      selectKnowledgeById({
        knowledgeId: this.$store.state.changedKnowledgeId,
      })
        .then((res) => {
          this.updateInfo = res.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    deleteKnowledgeInfo(item) {
      this.$store.commit("updateChangedKnowledgeId", item);
    },
  },
  created() {
    this.$store.commit("updateUserActiveIndex", "4-3");
    selectKnowledgeByUsername({})
      .then((res) => {
        this.userKnowledges = res.data;
      })
      .catch((err) => {
        console.log(err);
      });
  }
};
</script>

<style lang="less" scoped>
.knowledge-publish-container {
  padding: 20px;
  
  .publish-card {
    border-radius: 4px;
    
    .card-header {
      border-bottom: 1px solid #ebeef5;
      padding: 15px 20px;
    }
  }
  
  .knowledge-list {
    padding: 10px;
    
    .knowledge-col {
      margin-bottom: 20px;
    }
    
    .knowledge-item {
      border-radius: 4px;
      height: 100%;
      
      .knowledge-content {
        display: flex;
        height: 180px;
        
        .knowledge-image {
          width: 200px;
          margin-right: 15px;
          
          .knowledge-img {
            width: 100%;
            height: 100%;
            border-radius: 4px;
          }
          
          .image-error {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 100%;
            background: #f5f7fa;
            color: #909399;
            font-size: 30px;
          }
        }
        
        .knowledge-info {
          flex: 1;
          display: flex;
          flex-direction: column;
          overflow: hidden;
          
          .knowledge-title {
            font-size: 16px;
            margin: 0 0 10px;
            color: #303133;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          
          .knowledge-meta {
            margin-bottom: 10px;
            font-size: 12px;
            color: #909399;
            
            .knowledge-author {
              margin-right: 15px;
            }
          }
          
          .knowledge-desc {
            flex: 1;
            margin: 0;
            color: #606266;
            font-size: 14px;
            line-height: 1.5;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            overflow: hidden;
          }
          
          .knowledge-actions {
            text-align: right;
            margin-top: 10px;
          }
        }
      }
    }
  }
}
</style>